<template>
    <div id='cate'>
    <!-- 头部 -->
        <HeaderNav/>
        <!-- 某个地址的美食 -->
        <div class="details">
            <div class="details-box">
            <div class="breadcrumbs">
                <span class='crumbs'>南阳小吃快餐</span>
            </div>
            <div class="clear">
                <div class="d-left">
                    <div class="l-name">
                        <span class='snackName'>哈螺先生柳州螺蛳粉(南阳府衙店)</span>
                    </div>
                    <div class="l-score">
                        <p>4.3分人均￥<span>14</span></p>
                    </div>
                    <div class="l-address">
                        <p>地址：宛城区府衙步行街北段路西（大地电影院南100米）</p>
                        <p>电话：13523774038/15903020336</p>
                        <p>营业时间：周一至周日 11:00-21:30</p>
                    </div>
                </div>
                <div class="d-right">
                    <div class='r-big'>
                        <img src="../assets/ld/img/food1.jpg" alt="">
                    </div>
                </div>
            </div>
            </div>
        </div>
        <Recommend/>
        <CommentFood/>
       
        
    </div>
    
</template>
<script>
import HeaderNav from '../components/ly/HeaderNav.vue'
import Recommend from '../components/ld/C-commend.vue'

import CommentFood from '../components/ld/C-commentFood.vue'
export default {
    name:'Cate',
    components:{Recommend,HeaderNav,CommentFood}
}
</script>
<style lang="less" scoped> 
    // 某个地址的美食
    .details{
        width: 100%;
        margin: auto;
        background: #F8F8F8;
        .breadcrumbs{
            font-size: 12px;
            color: #222;
            line-height: 17px;
            padding: 19px;
            cursor: pointer;
            text-align: left;
        }
        .clear{
            font-size: 12px;
            color: #666;
            background-color: #fff;
            border-radius: 10px;
            padding: 20px 20px 33px 20px;
            border: 1px solid #e5e5e5;
            // box-shadow: 0 5px 14px rgb(0 0 0 / 10%);
            display: flex;
            margin: 5px 36px;
            .d-left{
                width: 65%;
                padding-right: 20px;
                .l-name{
                    font-size: 26px;
                    line-height: 37px; 
                    text-align: left;  
                }
                .l-score{
                    display: inline-block;
                    margin-left: 6px;
                    font-size: 14px;
                    height: 14px;
                    margin: 6px 0 17px 0;
                     text-align: left;  
                }
                .l-address{
                    border-top: 1px solid #e5e5e5;
                    border-bottom: 1px solid #e5e5e5;
                    padding: 16px 0 11px 0;
                     text-align: left;  
                    p{
                        font-size: 14px;
                        line-height: 20px;
                        margin-bottom: 10px;
                    }
                }
            }
            .d-right{
                cursor: pointer;
                width: 35%;
                overflow: hidden;
                .r-big{
                    height: 214px;
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
            }
           
        }
    }
</style>